<template>
	<!-- 添加月总计划 -->
	<view class="body">
		<myHeader :title="title"></myHeader>
		<!-- 新增 -->
		<view class="mt-20 p-20">
			<uni-forms :value="formData" ref="form" :rules="rules">
				<uni-forms-item class="text-gray" label="任务名称" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入任务名" />
				</uni-forms-item>
				<uni-forms-item class="text-gray" label="会议主题" name="theme">
					<uni-easyinput type="text" v-model="formData.theme" placeholder="请输入会议主题" />
				</uni-forms-item>
				<uni-forms-item class="text-gray" label="会议室" name="room">
					<uni-easyinput type="text" v-model="formData.room" placeholder="请输入会议室" />
				</uni-forms-item>
				<uni-forms-item class="text-gray" label="时间" name="time">
					<uni-datetime-picker v-model="formData.time"></uni-datetime-picker>
				</uni-forms-item>
				<!-- 图片上传 -->
				<uni-file-picker limit="1" :auto-upload="true" mode="list" file-mediatype="all" @select="select">
				</uni-file-picker>
				<progress v-if="progressVal != 0" activeColor="#4CAF50" :percent="progressVal"
					stroke-width="10"></progress>

				<!-- 分配任务给组长 -->
				<view class="">
					人员打分
					<!-- <button class="bg-red text-white" @click="addInner()">添加分解任务</button> -->
					<uni-icons type="plus" size="26" color="#C0C0C0" @click="addInner()"></uni-icons>
				</view>
				<view class="mt-20">
					<view v-for="(tab,index) in tabs" :key="index">
						<view class="mt-10 p-10 group">
							<uni-forms-item class="p-5" required name="header" label="人员">
								<picker @change="bindPickerChange($event,candidates, tab)" :range="candidates"
									:range-key="'realName'">
									<view class="uni-input">{{candidates[tab.idx].realName}}</view>
								</picker>
							</uni-forms-item>
							<uni-easyinput class="p-5" type="text" v-model="tab.score" placeholder="请输入分数" />
							<uni-icons type="minus" size="26" color="#C0C0C0" @click="remove(index)"></uni-icons>
						</view>

					</view>
				</view>
				<button class="mtb-20 bg-red text-white" @click="submit">提交</button>
			</uni-forms>

		</view>

	</view>
</template>

<script>
	import myHeader from '../../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	import axios from 'axios'
	export default {
		data() {
			return {
				title: ' 添加月总计划',
				tabs: [{
					userId: '',
					score: '',
					idx:0
				}],
				index: 0,
				formData: {
					name: '',
					theme: '',
					room: '',
					time: '',
					header: '',
					score: '',
				},
				// 下拉框候选
				candidates: [{
					leader: -1,
					realName: '请选择',
				}],
				candidateIdx: 0,
				// 文件上传后的url
				fileUrl: '',
				// 文件类型
				fileType: ".pdf,.doc,.docx",
				progressVal: 0,
				// 表单验证
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					// 对email字段进行必填验证
					theme: {
						rules: [{
							required: true,
							errorMessage: '请输入主题',
						}]
					},
					room: {
						rules: [{
							required: true,
							errorMessage: '请输会议室',
						}]
					},
					time: {
						rules: [{
							required: true,
							errorMessage: '请输入时间',
						}]
					},
				}
			}
		},
		created(){
			this.getMembers();
		},
		methods: {
			submit() {
				
				this.$refs.form.submit().then(res => {
					if (this.tabs.length <= 0){
						uni.showToast({
							title: '请选择人员打分'
						})
						return ;
					}
					for (let item of this.tabs){
						if (item.userId <= 0){
							uni.showToast({
								title: '请选择人员',
								icon: 'none'
							})
							return ;
						}
						if (item.score * 1 < 0){
							uni.showToast({
								title: '分数不能为负数',icon: 'none'
							})
							return ;
						}
					}
					let param = {
						"file": this.fileUrl,
						"name": this.formData.name,
						"room": this.formData.room,
						"time": this.formData.time,
						"theme": this.formData.theme,
						"lists":this.tabs,
					}
					NetWorkTool.POST('/api/federation-end-month/meeting', param, true).then(res => {
						uni.showToast({
							title: res.message,
							duration: 2000
						});
						this.formData = {};
						uni.navigateTo({
							url: './monthEndPlan'
						})
					});
				}).catch(err => {
					uni.showToast({
						title: "请完成信息填写",
						duration: 2000,
						icon: 'none',
					});
				})
			},
			// 获取组员信息
			getMembers() {
				NetWorkTool.POST('/api/federation-end-month/getFLAllUser', {}, false).then(res => {
					if (false != res) {
						for (let item of res) {
							this.candidates.push(item)
						}
					}
				});
			},
			// 获取上传状态
			select(e) {
				let source = e.tempFiles[0];
				let token = localStorage.getItem("AuthToken");
				const uploadTask = uni.uploadFile({
					url: '/api/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						'x-access-token': token
					},
					formData: {
						'name': source.name,
						'size': source.size
					},
					success: (res) => {
						this.fileUrl = JSON.parse(res.data).data.url;
						uni.showToast({
							title: "上传成功",
							duration: 2000
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.progressVal = res.progress;
					this.fileUrl = res.url;
				});
			},
			bindPickerChange(e, arr, tab) {
				tab.idx = e.target.value;
				tab.userId = arr[tab.idx].userId;
			},
			addInner(e) {
				this.index += 1;
				this.tabs.push({
					userId: '',
					score: '',
					idx:0
				});
			},
			remove(index) {
				if (this.inde != -1) {
					this.tabs.splice(index, 1);
				}
			},
		},
		components: {
			myHeader
		},
	}
</script>

<style>
	@import url("/static/party_building/assets/style/federation.css");
</style>
